<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description" content=""/>
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	<title>Website Template: Simple Organization - Comments (demo)</title>
</head>

<body>

<div id="site-wrapper">

	<div id="header">

		<div id="top">

			<div class="left" id="logo">
				<a href="index.html"><img src="img/logo.gif" alt="" /></a>
			</div>

			<div class="left navigation" id="main-nav">

				<ul class="tabbed">
					<li class="current-tab"><a href="index.html">Blog</a></li>
					<li><a href="#">Events</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Archives</a></li>
					<li><a href="#">Join Us!</a></li>
				</ul>

				<div class="clearer">&nbsp;</div>

			</div>

			<div class="clearer">&nbsp;</div>

		</div>

		<div class="navigation" id="sub-nav">

			<ul class="tabbed">
				<li><a href="index.html">Template Info</a></li>
				<li><a href="style-demo.html">Style Demo</a></li>
				<li class="current-tab"><a href="comments.html">Comments</a></li>
				<li><a href="archives.html">Archives</a></li>
				<li><a href="no-subnavigation.html">No Subnavigation</a></li>
				<li><a href="left-sidebar.html">Left Sidebar</a></li>
				<li><a href="single-column.html">Single Column</a></li>
				<li><a href="empty-page.html">Empty Page</a></li>
			</ul>

			<div class="clearer">&nbsp;</div>

		</div>

	</div>


	<div class="main" id="main-two-columns">

		<div class="left" id="main-content">

			<div class="post">

				<div class="post-title"><h1>Post having Comments</h1></div>

				<div class="post-date">Saturday, September 19, 2009 by Viktor Persson</div>

				<div class="post-body">
					Post content..
				</div>
			
			</div>

			<div id="comments">

				<div class="left">
					<h2>Comments: 5</h2>
				</div>

				<h3 class="right">
					<a href="#respond">Leave a reply &#187;</a>
				</h3>

				<div class="clearer">&nbsp;</div>

				<div class="comment-list-wrapper">

					<ul class="comment-list">

						<li class="comment comment-parent" id="comment-47">

							<div class="comment-profile-wrapper left">

								<div class="comment-profile">
									<div class="comment-gravatar"><img src="img/sample-gravatar.gif" height="40" width="40" alt="" /></div>
									<div class="comment-author"><a href="#">Viktor Persson</a></div>
								</div>

							</div>

							<div class="comment-content-wrapper right">
								<div class="comment-content-wrapper-2">

									<div class="comment-body">
									
										<div class="comment-arrow"></div>
										
										<div class="post-date">

											<div class="left">August 13th, 2009 at 22:58 <span class="text-separator">|</span> <a href="#">Reply &#187;</a></div>
											<div class="right"><a href="#comment-47">#47</a></div>

											<div class="clearer">&nbsp;</div>

										</div>

										<div class="comment-text">
											<p>Nested comments.</p>			
										</div>					

										<div class="clearer">&nbsp;</div>

									</div>
								
								</div>
							</div>

							<div class="clearer">&nbsp;</div>

							<ul class="children">

								<li class="comment" id="comment-49">
									
									<div class="comment-content">

										<div class="comment-body">
										
											<div class="post-date">

												<div class="left"><img src="img/sample-gravatar.gif" height="14" width="14" alt="" /> <span class="loud"><a href="#">Viktor Persson</a></span> - August 13th, 2009 at 23:05 <span class="text-separator">|</span> <a href="#">Reply &#187;</a></div>

												<div class="right"><a href="#comment-49">#49</a></div>

												<div class="clearer">&nbsp;</div>

											</div>
								
											<div class="comment-text">
												<p>Ligula in felis tristique convallis.</p>
											</div>

										</div>

									</div>
					
									<ul class="children">

										<li class="comment" id="comment-50">
											
											<div class="comment-content">

												<div class="comment-body">
												
													<div class="post-date">

														<div class="left"><img src="img/sample-gravatar.gif" width="14" height="14" alt="" /> <span class="loud"><a href="#">Viktor Persson</a></span> - August 13th, 2009 at 23:05</div>

														<div class="right"><a href="#comment-50">#50</a></div>

														<div class="clearer">&nbsp;</div>

													</div>
										
													<div class="comment-text">
														<p>Pellentesque sit amet.</p>
													</div>

												</div>				

											</div>
											
										</li>
									</ul>

								</li>

							</ul>
						</li>

						<li class="comment comment-single" id="comment-48">

							<div class="comment-profile-wrapper left">

								<div class="comment-profile">				
									<div class="comment-gravatar"><img src="img/sample-gravatar.gif" width="40" height="40" alt="" /></div>
									<div class="comment-author"><a href="#">Viktor Persson</a></div>
								</div>

							</div>

							<div class="comment-content-wrapper right">
								<div class="comment-content-wrapper-2">

									<div class="comment-body">
									
										<div class="comment-arrow"></div>

										
										<div class="post-date">

											<div class="left">August 13th, 2009 at 23:03 <span class="text-separator">|</span> <a href="#">Reply &#187;</a></div>
											<div class="right"><a href="#comment-48" title="Permanent link to this reply">#48</a></div>

											<div class="clearer">&nbsp;</div>
										</div>


										<div class="comment-text">
											<p>Vestibulum porttitor varius augue sit amet dictum. Donec pretium sodales felis id ultricies. Integer pretium, elit nec rutrum ullamcorper.</p>
										</div>					

										<div class="clearer">&nbsp;</div>

									</div>
								
								</div>
							</div>

							<div class="clearer">&nbsp;</div>

						</li>

						<li class="comment comment-single" id="comment-51">

							<div class="comment-profile-wrapper left">

								<div class="comment-profile">				
									<img src="img/sample-gravatar.gif" width="40" height="40" alt="" />
									<div class="comment-author"><a href="#">Viktor Persson</a></div>
								</div>

							</div>

							<div class="comment-content-wrapper right">
								<div class="comment-content-wrapper-2">

									<div class="comment-body">
									
										<div class="comment-arrow"></div>
										
										<div class="post-date">

											<div class="left">August 13th, 2009 at 23:05 <span class="text-separator">|</span> <a href="#">Reply &#187;</a></div>
											<div class="right"><a href="#comment-51">#51</a></div>

											<div class="clearer">&nbsp;</div>

										</div>

										<div class="comment-text">
											<p>Morbi sollicitudin mollis dapibus.</p>
										</div>					

										<div class="clearer">&nbsp;</div>

									</div>
								
								</div>
							</div>

							<div class="clearer">&nbsp;</div>

						</li>
					
					</ul>

				</div>

			</div>

			<div id="respond">

				<ul>
					<li>

						<div class="legend" id="comment-form-title">Leave a Reply</div>

						<div class="comment-profile-wrapper left">

							<div class="comment-profile">				
								<div class="comment-gravatar"><img src="img/sample-gravatar.gif" width="40" height="40" alt="Your gravatar" /></div>
								<div class="comment-author">Your Name</div>
							</div>

						</div>

						<div class="comment-content-wrapper">
								
							<div class="comment-body">
							
								<div class="comment-arrow"></div>
									
								<form action="" method="post" id="commentform">

									<fieldset>
										
										<div class="form-row comment-input-text"><textarea name="comment" id="comment" cols="10" rows="10" tabindex="4"></textarea></div>

										<div class="form-row comment-input-name">
											
											<div class="form-property required"><label for="author">Name *</label></div>
											<div class="form-value"><input type="text" name="author" id="author" value="" size="28" tabindex="1" class="text" /></div>

											<div class="clearer">&nbsp;</div>

										</div>

										<div class="form-row comment-input-email">

											<div class="form-property required"><label for="email">Email *</label></div>
											<div class="form-value"><input type="text" name="email" id="email" value="" size="28" tabindex="2" class="text" /></div>
											
											<div class="clearer">&nbsp;</div>

										</div>

										<div class="form-row comment-input-website">

											<div class="form-property"><label for="url">Website</label></div>					
											<div class="form-value"><input type="text" name="url" id="url" value="" size="28" tabindex="3" class="text" /></div>

											<div class="clearer">&nbsp;</div>

										</div>
							
										<div class="form-row form-row-submit">														
											<input type="submit" class="button" value="Submit Comment" />
										</div>

									</fieldset>

								</form>

							</div>				
						
							<div class="clearer">&nbsp;</div>

						</div>

						<div class="clearer">&nbsp;</div>
						
					</li>

				</ul>

			</div>
			
		</div>

		<div class="right sidebar" id="sidebar">

			<div class="section">

				<div class="section-title">Search</div>

				<div class="section-content">
					<form method="post" action="">
						<input type="text" class="text" size="28" /> &nbsp; <input type="submit" class="button" value="Submit" />
					</form>
				</div>

			</div>

			<div class="section">

				<div class="section-title">Recent Entries</div>

				<div class="section-content">

					<ul class="nice-list">
						<li>
							<div class="left"><a href="#">Aenean tempor arcu..</a></div>
							<div class="right">Oct 12</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">Justo interdum rutrum</a></div>
							<div class="right">Sep 15</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">In nec justo in urna</a></div>
							<div class="right">Sep 12</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">Accumsan condimentum</a></div>
							<div class="right">Sep 6</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">Etiam commodo bibendum</a></div>
							<div class="right">Aug 27</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">Mauris euismod justo</a></div>
							<div class="right">Aug 21</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li><a href="#" class="more">Browse Archives &#187;</a></li>
					</ul>

				</div>

			</div>

			<div class="section">

				<div class="section-title">Board of Members</div>

				<div class="section-content">

					<ul class="nice-list">
						<li><a href="#">Elem Semper</a> <span class="quiet">- Director</span></li>
						<li><a href="#">Porttitor Urna</a> <span class="quiet">- Lead Writer</span></li>
						<li><a href="#">Congue Porttitor</a> <span class="quiet">- Editor</span></li>
						<li><a href="#">Etiam Blandit</a> <span class="quiet">- Writer</span></li>
						<li><a href="#">Diet Tesque</a> <span class="quiet">- Writer</span></li>
					</ul>
					
				</div>

			</div>

			<div class="section">

				<div class="section-title">Topics</div>

				<div class="section-content">
					<div class="quiet">
						<a href="#" style="font-size: 120%">vestibulum</a> <a href="#" style="font-size: 120%">ante</a> <a href="#" style="font-size: 150%">ipsum</a> <a href="#" style="font-size: 120%">faucibus</a> <a href="#" style="font-size: 90%">orci luctus</a> <a href="#" style="font-size: 80%">ultrices</a> <a href="#" style="font-size: 220%">posuere cubilia</a> <a href="#" style="font-size: 100%">curae</a> <a href="#" style="font-size: 110%">quisque</a> <a href="#" style="font-size: 150%">ut arcu</a> <a href="#" style="font-size: 140%">eros</a> <a href="#" style="font-size: 100%">vestibulum</a> <a href="#" style="font-size: 90%">dapibus</a> <a href="#" style="font-size: 120%">volutpat</a> <a href="#" style="font-size: 200%">elementum</a> 
					</div>
				</div>
			
			</div>

		</div>

		<div class="clearer">&nbsp;</div>

	</div>

	<div id="footer">

		<div class="left" id="footer-left">
			
			<img src="img/logo-small.gif" alt="" class="left" />
			
			<p>&copy; 2002-2009 Simple Organization. All rights Reserved</p>

			<p class="quiet"><a href="http://templates.arcsin.se/">Website template</a> by <a href="http://arcsin.se/">Arcsin</a></p>
			
			<div class="clearer">&nbsp;</div>

		</div>

		<div class="right" id="footer-right">

			<p class="large"><a href="#">Blog</a> <span class="text-separator">|</span> <a href="#">Events</a> <span class="text-separator">|</span> <a href="#">About</a> <span class="text-separator">|</span> <a href="#">Archives</a> <span class="text-separator">|</span> <strong><a href="#">Join Us!</a></strong> <span class="text-separator">|</span> <a href="#top" class="quiet">Page Top &uarr;</a></p>

		</div>

		<div class="clearer">&nbsp;</div>

	</div>

</div>

</body>
</html>